import { ExtractPropTypes, PropType, VNode } from "vue";
import "./treeTable.scss";
// 列插槽参数
interface ColumnSlotParams {
  text: string;
  record: any;
  index: number;
  column: ColumnProps;
}
// 列属性
export interface ColumnProps {
  key: string;
  title: string;
  customRender?: (params: ColumnSlotParams) => VNode;
}
export const tableProps = {
  columns: {
    type: Array as PropType<ColumnProps[]>,
    default: () => [],
  },
  dataSource: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
  cellHeight: {
    type: Number,
    default: 55,
  },
  scrollY: {
    type: Number,
    default: 600,
  },
};
export type TableProps = ExtractPropTypes<typeof tableProps>;

export function useTreeData(props: TableProps) {
  const expandedRowKeys = ref<(string | number)[]>([]);
  // 判断是否展开
  const isExpanded = (key) => {
    return expandedRowKeys.value.includes(key);
  };
  // 切换展开关闭
  const toggleExpand = (key) => {
    const index = expandedRowKeys.value.indexOf(key);
    index > -1
      ? expandedRowKeys.value.splice(index, 1)
      : expandedRowKeys.value.push(key);
  };
  const walkTree = (data, walkData, level = 0) => {
    for (const item of walkData) {
      data.push({ ...item, level });
      if (isExpanded(item.id) && item.children) {
        walkTree(data, item.children, level + 1);
      }
    }
  };
  const tableData = computed(() => {
    const data = [];
    walkTree(data, props.dataSource);
    console.log(data, props.dataSource);

    return data;
  });
  return { isExpanded, toggleExpand, tableData };
}

export default defineComponent({
  name: "TreeTable",
  props: tableProps,
  setup(props) {
    const { isExpanded, toggleExpand, tableData } = useTreeData(props);
    const { columns } = props;

    return () => (
      <table class="table">
        <thead>
          <tr>
            {columns.map((column) => {
              return <th>{column.title}</th>;
            })}
          </tr>
        </thead>
        <tbody>
          {tableData.value.map((record, index) => {
            return (
              <tr>
                {columns.map((column, columnIndex) => {
                  const { customRender, key } = column;
                  const { id, level } = record;
                  return (
                    <td>
                      {columnIndex === 0 && (
                        <>
                          <span
                            style={{ paddingLeft: `${level * 20}px` }}
                          ></span>
                          <button
                            style={{
                              width: "20px",
                              height: "20px",
                              marginRight: "5px",
                              padding: 0,
                            }}
                            onClick={() => toggleExpand(id)}
                          >
                            {isExpanded(id) ? "-" : "+"}
                          </button>
                        </>
                      )}
                      {customRender
                        ? customRender({
                            record,
                            index,
                            column,
                            text: record[key],
                          })
                        : record[key]}
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    );
  },
});
